<template>
  <view>
    <div
      style="
        height: 290px;
        background-image: linear-gradient(to bottom, #478ef2, #ffffff);
      "
    >
      <div style="height: 38px; position: relative">
        <img
          src="https://z1.ax1x.com/2023/10/17/piPS9rq.png"
          alt="图标"
          style="width: 25px; height: 25px; position: absolute; right: 0"
          is-link
          @click="click"
        />
        <nut-action-sheet
          v-model:visible="visible5"
          :menu-items="menuItems"
          cancel-txt="取消"
          @choose="choose"
        ></nut-action-sheet>
      </div>
      <div style="color: white; padding: 40px 20px 0 50px">
        <span style="font-size: 30px; display: inline-block"> {{ formattedDate }} </span>
        <img
          :src="weatherIcon"
          alt="图标"
          style="vertical-align: middle; margin-right: 5px; width: 20px; height: 20px"
        />
        <span style="font-size: 12px; display: inline-block">{{ dayName }}</span>

        <span style="font-size: 16px; display: inline-block; padding-left: 15px">
          您好:
        </span>
        <div style="position: relative">
          <text
            style="
              position: absolute;
              top: -29px;
              left: 200px;
              font-size: 20px;
              color: rgb(36, 36, 35);
            "
          >
            {{ userData.userName }}
          </text>
        </div>
      </div>
      <div style="height: 35px"></div>
      <div style="color: white; padding: 0 80px 0 50px; font-size: 15px">
        {{ notice }}
      </div>

      <div style="height: 50px"></div>
      <div
        style="
          height: 70px;
          width: 300px;
          margin: 0 45px;
          background-color: #ffffff;
          border-radius: 40px;
        "
      >
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            padding: 0 20px;
          "
        >
          <div >
            <img
              src="https://z1.ax1x.com/2023/09/14/pPRL91A.png"
              alt="图标"
              style="width: 33px; height: 33px"
              is-link
              @click="showBottom1 = true"
            />
            <div style="margin-top: -5px; color: rgb(136, 180, 246)">销假</div>
            <nut-popup
              position="bottom"
              round
              closeable
              :style="{ height: '80%' }"
              v-model:visible="showBottom1"
              :lock-scroll="false"
            >
            <div
                style="
                  height: 55px;
                  font-size: 20px;
                  text-align: center;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                销假
              </div>
              <nut-collapse v-model="activeName1" :accordion="true">
    <nut-collapse-item v-for="item in dataList" :key="item.ID" :title="item.UserName" :value="item.applyDate" :name="item.ID">
      <template #extra>{{ item.leaveNameFull }}</template>
     <view style="margin-bottom: 10px;">  开始时间: {{ item.dateStart }}</view>
  <view style="margin-bottom: 10px;">  结束时间: {{ item.dateEnd }} </view>
  <view style="margin-bottom: 10px;"> 请假/加班天数: {{ item.dateCount }}</view>
  <view style="margin-bottom: 10px;">请假原因: {{ item.leaveCause }}</view>
    

      <nut-button  color="#7ba3f1" size="small" @click="approve(item.ID)">确认销假</nut-button>
    </nut-collapse-item>
  </nut-collapse>
            </nut-popup>
          </div>
          <div style="text-align: center">
            <img
              src="https://z1.ax1x.com/2023/09/14/pPRLGAU.png"
              alt="图标"
              style="width: 33px; height: 33px"
              is-link
              @click="showBottom = true"
            />
            <div style="margin-top: -5px; color: rgb(136, 180, 246)">请假</div>
            <nut-popup
              position="bottom"
              round
              closeable
              :lock-scroll="false"
              v-model:visible="showBottom"
              :style="{ height: '80%' }"
            >
              <div
                style="
                  height: 55px;
                  font-size: 20px;
                  text-align: center;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                请选择请假类型
              </div>
              <div>
                <nut-grid :column-num="2" square>
                  <nut-grid-item text="单位加班">
                    <img
                      src="https://z1.ax1x.com/2023/09/15/pPWrpiF.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop1', 48)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop1"
                  >
                    <div class="1">单位加班</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="加班天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入加班天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>加班事由</div>
                        <nut-form-item label="加班时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(1, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[1]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                            @click="toggleEshow(1, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[1]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="外派"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWrYo8.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop2', 50)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop2"
                  >
                    <div class="2">外派</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="外派天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入外派"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>外派事由</div>
                        <nut-form-item label="外派时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(2, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[2]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                            @click="toggleEshow(2, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[2]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="外派事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="扣薪病假"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWyXqI.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop3', 43)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop3"
                  >
                    <div class="3">扣薪病假</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="请假天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入请假天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>请假事由</div>
                        <nut-form-item label="加班时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(3, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[3]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                           @click="toggleEshow(3, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[3]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="带薪病假"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWyLMd.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop4', 55)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop4"
                  >
                    <div class="4">带薪病假</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="请假天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入请假天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>请假事由</div>
                        <nut-form-item label="加班时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(4, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[4]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                           @click="toggleEshow(4, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[4]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="事假"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPW6Yo6.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop5', 46)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop5"
                  >
                    <div class="5">事假</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="请假天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入请假天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>请假事由</div>
                        <nut-form-item label="加班时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(5, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[5]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                           @click="toggleEshow(5, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[5]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="婚假"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWrjld.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop6', 45)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop6"
                  >
                    <div class="6">婚假</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="请假天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入请假天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>请假事由</div>
                        <nut-form-item label="加班时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(6, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[6]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                           @click="toggleEshow(6, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[6]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="哺乳假"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWsitS.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop7', 54)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop7"
                  >
                    <div class="7">哺乳假</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="请假天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入请假天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>请假事由</div>
                        <nut-form-item label="加班时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(7, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[7]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                           @click="toggleEshow(7, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[7]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="产假"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWsu7V.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop8', 44)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop8"
                  >
                    <div class="8">产假</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="请假天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入请假天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>请假事由</div>
                        <nut-form-item label="加班时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(8, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[8]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                           @click="toggleEshow(8, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[8]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="陪产假"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWslhF.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop9', 52)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop9"
                  >
                    <div class="9">陪产假</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="请假天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入请假天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>请假事由</div>
                        <nut-form-item label="加班时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(9, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[9]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                           @click="toggleEshow(9, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[9]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="计划生育假"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWsN0x.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop10',53 )"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop10"
                  >
                    <div class="10">计划生育</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="请假天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入请假天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>请假事由</div>
                        <nut-form-item label="加班时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(10, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[10]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                             @click="toggleEshow(10, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[10]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="在家加班"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWcn0I.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop11', 60)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop11"
                  >
                    <div class="11">在家加班</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="加班天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入加班天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>加班事由</div>
                        <nut-form-item label="加班时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(11, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[11]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                             @click="toggleEshow(11, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[11]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="丧假"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWcZXd.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop12', 51)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop12"
                  >
                    <div class="12">丧假</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="请假天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入请假天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>请假事由</div>
                        <nut-form-item label="加班时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(12, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[12]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                             @click="toggleEshow(12, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[12]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="在家办公"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWcV6H.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop13', 56)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop13"
                  >
                    <div class="13">在家办公</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="在家办公天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入在家办公天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>在家办公事由</div>
                        <nut-form-item label="在家办公时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(13, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[13]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                             @click="toggleEshow(13, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[13]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="出差"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWcU7q.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop14', 59)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop14"
                  >
                    <div class="14">出差</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="出差天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入出差天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>出差事由</div>
                        <nut-form-item label="出差时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(14, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[14]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                             @click="toggleEshow(14, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[14]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="年假"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWcU7q.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop15', 47)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop14"
                  >
                    <div class="15">年假</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="请假天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入请假天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>请假事由</div>
                        <nut-form-item label="请假时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(15, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[15]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                             @click="toggleEshow(15, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[15]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                  <nut-grid-item text="调休"
                    ><img
                      src="https://z1.ax1x.com/2023/09/15/pPWcU7q.png"
                      alt="图标"
                      style="width: 130px; height: 130px"
                      @click="() => openPopup('showPop16', 49)"
                  /></nut-grid-item>
                  <nut-popup
                    position="bottom"
                    round
                    closeable
                    :style="{ height: '80%' }"
                    :lock-scroll="false"
                    v-model:visible="showPop14"
                  >
                    <div class="16">调休</div>
                    <div>
                      <nut-form>
                        <nut-form-item label="姓名">
                          <nut-textarea readonly :model-value="userData.userName" />
                        </nut-form-item>
                        <nut-form-item label="部门">
                          <nut-textarea readonly :model-value="depa" />
                        </nut-form-item>
                        <nut-form-item label="申请日期">
                          <nut-textarea readonly :model-value="MMDATE" />
                        </nut-form-item>
                        <nut-form-item label="请假天数">
                          <input
                            class="nut-input-text"
                            placeholder="请输入请假天数"
                            type="text"
                            v-model="state9.Days"
                          />
                        </nut-form-item>
                        <div>请假事由</div>
                        <nut-form-item label="请假时间">
                          <nut-cell
                            title="选择开始日期"
                            :desc="popupDesc"
                            @click="toggleSshow(16, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Sshow[16]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                          <nut-cell
                            title="选择结束日期"
                            :desc="popupDesc1"
                             @click="toggleEshow(16, true)"
                          ></nut-cell>
                          <nut-popup position="bottom" v-model:visible="Eshow[16]">
                            <nut-date-picker
                              type="datetime"
                              v-model="currentDate1"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @confirm="popupConfirm1"
                              :is-show-chinese="true"
                            >
                            </nut-date-picker>
                          </nut-popup>
                        </nut-form-item>
                        <nut-form-item label="地点">
                          <input
                            class="nut-input-text"
                            placeholder="请输入地址"
                            type="text"
                            v-model="state9.place"
                          />
                        </nut-form-item>
                        <nut-form-item label="事项">
                          <nut-textarea type="text" v-model="state9.matter" />
                        </nut-form-item>
                        <nut-form-item label="备注">
                          <nut-textarea
                            placeholder="请输入备注"
                            type="text"
                            v-model="state9.notes"
                          />
                        </nut-form-item>

                        <nut-button
                          type="primary"
                          style="margin-right: 10px"
                          size="large"
                          @click="handleSubmit"
                          >提交</nut-button
                        >
                      </nut-form>
                    </div>
                  </nut-popup>
                </nut-grid>
              </div>
            </nut-popup>
          </div>
          <div style="text-align: center">
            <img
              src="https://z1.ax1x.com/2023/09/14/pPRLVAS.png"
              alt="图标"
              style="width: 33px; height: 33px"
                 @click="MYAClick "
            />
            <div style="margin-top: -5px; color: rgb(136, 180, 246)">考勤</div>
        
          </div>
        </div>
      </div>
    </div>
    <view>
      <nut-divider :style="{ color: 'rgb(163, 180, 234)' }" content-position="left"
        >员工假别信息</nut-divider
      >
      <nut-table :columns="columns1" :data="data1" :striped="striped"></nut-table>
      <nut-table :columns="columns2" :data="data2" :striped="striped"></nut-table>
    </view>
  </view>
</template>
<script lang="ts">
 import { reactive, toRefs, ref, onMounted ,watch} from "vue";
import { InputNumber, DatePicker, Input } from "@nutui/nutui-taro";
import Taro from "@tarojs/taro";
export default {
  props: {},
  setup() {
    const today = new Date();
    const date = today.getDate();
    const month = today.getMonth() + 1;
    const year = today.getFullYear();
    const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    const dayName = days[today.getDay()];
    const formattedDate = `${month < 10 ? "0" + month : month}-${
      date < 10 ? "0" + date : date
    }`;
    const month1 = (today.getMonth() + 1).toString().padStart(2, "0");
    const date1 = today.getDate().toString().padStart(2, "0");
    const MMDATE = `${year}-${month1}-${date1}`;
    const userData = Taro.getStorageSync("userData");
    const userid =  userData.id;
    const activeName1 = ref(1);
    const dataList = ref([]);
    const select = async () => {
      const formData = {
        view: "V_GetLeaveOrder",
        userId: userid,
        depaCode: "string",
      };
      try {
        const response = await new Promise((resolve, reject) => {
          Taro.request({
            url: "https://sunyukq.transpheretms.com:8078/api/Select",
            method: "POST",
            data: formData,
            header: {
              "Content-Type": "application/json"
            },
            success: function (res) {
              if (res && res.statusCode === 200) {
                console.log("查询到数据");
                resolve(res.data);
              } else {
                console.log("查询失败");
                reject(new Error("查询失败"));
              }
            }
          })
        });
        dataList.value = response;
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };
    select();
    const approve = async (id) => {
      console.log(`Approving ID: ${id}`);
      try {
    const response = await new Promise((resolve, reject) => {
      Taro.request({
        url: "https://sunyukq.transpheretms.com:8078/api/applyOrder",
        method: "POST",
        data: {
          userid: userid, // 当前登录用户的ID
          ID: id // 请假记录的ID
        },
        header: {
          "Content-Type": "application/json"
        },
        success: function(res) {
          if (res && res.statusCode === 200) {
            resolve(res.data);
            select();  // 刷新数据
            Taro.showToast({
      title: '销假成功',
      icon: 'success',
      duration: 2000
    });
          } else {
            reject(new Error("Error approving"));
          }
        },
        fail: function(err) {
          reject(err);
        }
      });
    });
    console.log("Approve response:", response); 
  } catch (error) {
    console.error("Error approving:", error);
  }
    };

    const Sshow = ref([Array(17).fill(false)]);

    const Eshow =  ref([Array(17).fill(false)]);

for (let i = 1; i < 17; i++) {
  Sshow.value[i] = false;
  Eshow.value[i] = false;
}
    const popupDesc = ref();
    const popupDesc1 = ref();
    const minDate = new Date(2020, 0, 1);
    const maxDate = new Date(2025, 10, 1);
    const currentDate = new Date(2023, 10, 27, 9, 0);
    const currentDate1 = new Date(2023, 10, 27, 16, 10);
    let SD = "";
    let ED = "";
    const toggleSshow = (index, status) => {
  Sshow.value[index] = status;
}
const toggleEshow = (index, status) => {
  Eshow.value[index] = status;
}
    const popupConfirm = ({ selectedValue, selectedOptions }) => {
      popupDesc.value = selectedOptions.map((val: any) => val.text).join("");
      for (let i = 1; i < 17; i++) {
    if (Sshow.value[i] === true) {
        Sshow.value[i] = false;
        break;
    }
}

      console.log("popupDesc.value的值为：" + popupDesc.value);
      SD = popupDesc.value
        .replace("年", "-")
        .replace("月", "-")
        .replace("日", " ")
        .replace("时", ":")
        .replace("分", ":00");
      console.log(SD);
    };
    const popupConfirm1 = ({ selectedValue, selectedOptions }) => {
      popupDesc1.value = selectedOptions.map((val: any) => val.text).join("");
      for (let i = 0; i < 14; i++) {
    if (Eshow.value[i] === true) {
        Eshow.value[i] = false;
        break;
    }
}
      
      ED = popupDesc1.value
        .replace("年", "-")
        .replace("月", "-")
        .replace("日", " ")
        .replace("时", ":")
        .replace("分", ":00");
      console.log(ED);
    };
    //提交的表单
    const state9 = reactive({
      userCode: "",
      Type: "",
      Days: "",
      startDate: "",
      endDate: "",
      place: "",
      matter: "",
      notes: "",
      synj: "",
    });
    const state4 = reactive({
      isVisible7: false,
    });
    const activeName = ref(1);
    const title = reactive({
      title1: "2023年9月18日病假",
      title2: "2023年9月18日事假",
      title3: "标题3",
    });
    const openPopup = (popupName, type) => {
  state2[popupName] = true;
  state2.currentType = type;
}
    const state2 = reactive({
      showPop1: false,
      showPop2: false,
      showPop3: false,
      showPop4: false,
      showPop5: false,
      showPop6: false,
      showPop7: false,
      showPop8: false,
      showPop9: false,
      showPop10: false,
      showPop11: false,
      showPop12: false,
      showPop13: false,
      showPop14: false,
      currentType: null
    });
    var SJ;
    const state1 = reactive({
      showBottom: false,
    });
    const state3 = reactive({
      showBottom1: false,
    });
    const depaCode = userData.depaCode;
    console.log(depaCode);
    const fetchData = async () => {
      try {
        const userData = await Taro.getStorageSync("userData");
        console.log(userData.userCode);
        if (!userData || !userData.userCode) {
          console.error("用户数据未找到或用户ID缺失");
          return;
        }

        const usercode = userData.userCode;

        const apiUrl = `https://sunyukq.transpheretms.com:8078/api/UserInfo?usercode=${usercode}`;
        //const apiUrl = `http://218.2.231.120:2054/api/UserInfo?usercode=${usercode}`;

        const response = await new Promise((resolve, reject) => {
          Taro.request({
            url: apiUrl,
            method: "GET",
            header: {
              "Content-Type": "application/json",
            },
            success: function (res) {
              resolve(res.data);
            },
            fail: function (error) {
              reject(error);
            },
          });
        });

        if (response && response.trim().length > 0) {
          // 确保返回的数据不为空字符串
          const responseData = JSON.parse(response);

          state.data1 = [
            {
              byjb: responseData.byjb,
              zqktx: responseData.zqtx,
              bytx: responseData.bytx,
              jyktx: responseData.jytx,
            },
          ];

          state.data2 = [
            {
              qnnj: responseData.nj1,
              synj: responseData.nj2,
              dxbj: responseData.bj1,
              sydxbj: responseData.bj2,
            },
          ];
          SJ = responseData.synj;
        } else {
          console.error("返回数据格式不正确");
        }
      } catch (error) {
        console.error("请求失败：", error);
      }
    };

    const handleSubmit = async () => {
      const userData = await Taro.getStorageSync("userData");
      
      const formData = {
        userCode: userData.userCode,
        Type: state2.currentType,
        Days: state9.Days,
        Date: MMDATE,
        startDate: SD,
        endDate: ED,
        place: state9.place,
        matter: state9.matter,
        notes: state9.notes,
        synj: SJ,
      };

      try {
        const response = await new Promise((resolve, reject) => {
          Taro.request({
            url: "https://sunyukq.transpheretms.com:8078/api/LeaveType",
            method: "POST",
            data: formData, // 您的表单数据
            header: {
              "content-type": "application/json",
            },
            success: function (res) {
              if (res && res.statusCode === 200) {
                // 处理成功的情况
                Taro.showToast({
                  title: "提交成功",
                  icon: "success",
                  duration: 2000,
                });
                resolve(res.data);
              //  state2.showPop2 = false;  // 关闭弹出层
                    // 遍历 state2 的属性并关闭第一个为 true 的弹出层
    for (let i = 1; i <= 14; i++) {
        const key = `showPop${i}`;
        if (state2[key] === true) {
            state2[key] = false;
            break; // 退出循环，因为我们只想关闭第一个为 true 的弹出层
        }
    }
              } else {
                // 处理失败的情况
                Taro.showToast({
                  title: "提交失败",
                  icon: "error",
                  duration: 2000,
                });
                reject(res);
              }
            },
            fail: function (error) {
              reject(error);
            },
          });
        });
      } catch (error) {
        console.error("提交出错:", error);
      }
    };

    const visible5 = ref(false);
 
   var a = userData.IsDepartmentHead;
 var menuItems; 

if (a === 1) {
  menuItems = [
    {
      name: "退出登录",
      action: "logout",
    },
    {
      name: "审核",
      action: "check",
    },
  ];
} else {
  menuItems = [
    {
      name: "退出登录",
      action: "logout",
    },
  ];
}
    const click = () => {
      visible5.value = !visible5.value;
    };
    const choose = (item) => {
      switch (item.action) {
        case "logout":
          // 当选择退出登录时，清除本地存储中的用户信息
          Taro.removeStorageSync("isLoggedIn");
          // 当选择退出登录时，导航到登录界面
          Taro.redirectTo({
            url: "/pages/ALogin/index",
          });
          break;
        case "check":
        Taro.navigateTo({
            url: "/pages/Check/index",
          });
          break;
        default:
          break;
      }
    };
    const state = reactive({
      striped: true,
      columns1: [
        {
          title: "本月加班",
          key: "byjb",
        },
        {
          title: "之前可调休",
          key: "zqktx",
        },
        {
          title: "本月调休",
          key: "bytx",
        },
        {
          title: "结余可调休",
          key: "jyktx",
        },
      ],

      columns2: [
        {
          title: "全年年假",
          key: "qnnj",
        },
        {
          title: "剩余年假",
          key: "synj",
        },
        {
          title: "带薪病假",
          key: "dxbj",
        },
        {
          title: "剩余带薪病假",
          key: "sydxbj",
        },
      ],
      data1: [],
      data2: [],
      columns3: [
        {
          title: "序号",
          key: "number",
          align: "center",
        },
        {
          title: "假别类型",
          key: "jblx",
        },
        {
          title: "申请日期",
          key: "ApplicationDate",
        },

        {
          title: "查看详细",
          key: "render",
        },
      ],
      text: "",
    });

    const departmentMap = {
      11: "管委会",
      17: "客户服务部",
      21: "人事行政部",
      28: "日文专利部",
      34: "英中专利部",
      35: "中英专利部",
      36: "德文专利部",
      38: "网络安全部",
      39: "软件研发部",
      40: "技术处理部",
      41: "财务部",
      42: "知识产权服务部",
      44: "舜禹投资",
      66: "翻译技术部",
      71: "环球通事业部",
      73: "客户运营部",
      74: "专项交付中心",
      75: "市场运营与口译服务部",
      76: "FTA",
      81: "资源管理部",
      82: "事业三部",
      83: "语言部",
      84: "工程/排版部",
      85: "深圳办公室",
      86: "赛事语服部",
      87: "赛事部",
      91: "事业一部",
      92: "事业二部",
    };
    const depa = departmentMap[depaCode];
    const MYAClick = () =>{
      Taro.navigateTo({
        url: '/pages/myAttendance/index'
      })
    }
    const weatherdate = ref(MMDATE); // 你可以根据需要更改这个日期
    const weatherData = ref(null)
    const weatherIcon = ref('')
    const notice = ref('')
    const weatherIcons = {
      晴: 'https://z1.ax1x.com/2023/09/14/pPRoD74.png',
      阴: 'https://z1.ax1x.com/2023/11/01/piuElrj.png',
      小雨: 'https://z1.ax1x.com/2023/11/01/piuEazF.png',
      中雨:'https://z1.ax1x.com/2023/11/01/piuEwM4.png',
      大雨: 'https://z1.ax1x.com/2023/11/01/piuEURU.png',
      小雪: 'https://z1.ax1x.com/2023/11/01/piuEJI0.png',
      大雪: 'https://z1.ax1x.com/2023/11/01/piuE1qs.png',
      中雪:'https://z1.ax1x.com/2023/11/01/piuEGaq.png',

      // ... 其他天气状态
    }
    watch(weatherdate, async (newDate) => {
  try {
    const response = await new Promise((resolve, reject) => {
      Taro.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101190101',
        method: 'GET',
        header: {
          "Content-Type": "application/json"
        },
        success: function (res) {
          if (res && res.statusCode === 200) {
            console.log("查询到天气数据");
            resolve(res.data);
          } else {
            console.log("查询天气数据失败");
            reject(new Error("查询天气数据失败"));
          }
        }
      });
    });
    
    weatherData.value = response;
    updateWeatherStatus(newDate);
  } catch (error) {
    console.error('获取天气数据失败', error);
  }
}, { immediate: true });
function updateWeatherStatus(targetDate) {
      const targetForecast = weatherData.value.data.forecast.find(f => f.ymd === targetDate)
      if (targetForecast) {
        weatherIcon.value = weatherIcons[targetForecast.type] || ''
        notice.value = targetForecast.notice
      } else {
        console.warn('未找到目标日期的天气预报')
        weatherIcon.value = ''
        notice.value = ''
      }
    }
    onMounted(fetchData);

    return {
      ...toRefs(state),
      ...toRefs(state1),
      ...toRefs(state2),
      ...toRefs(state3),
      weatherIcon,
      notice,
      MYAClick,
      state9,
      DatePicker,
      InputNumber,
      visible5,
      menuItems ,
      click,
      choose,
      activeName,
      ...toRefs(title),
      ...toRefs(state4),
      popupDesc,
      popupDesc1,
      currentDate,
      currentDate1,
      minDate,
      maxDate,
      popupConfirm,
      popupConfirm1,
      userData,
      formattedDate,
      dayName,
      fetchData,
      MMDATE,
      departmentMap,
      depa,
      handleSubmit,
      SD,
      ED,
      openPopup,
      SJ,
      toggleEshow,
      toggleSshow,
      Sshow,
      Eshow,
      activeName1,
      dataList,
      approve,
    };
  },
};
</script>
<style scoped>
.editable {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

.editable:hover {
  text-decoration: none;
}
</style>
